<!--配置路由-->
<script setup>
import {ElementUtils} from "@/assets/js/ElementUtils";
import {setWindowTitle} from "@/assets/js/TitleUtils";
import {setupMapState} from "@/assets/js/vuexUtils";
import {DeleteFilled} from "@element-plus/icons-vue";
import {NgaClient} from "@ginstone/nga-api/dist/src/client/NgaClient";
import {ElMessageBox} from "element-plus";
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import BlockDataConfig from "@/components/config/BlockDataConfig.vue";
import PmBlockConfig from "@/components/config/PmBlockConfig.vue";
import UiConfig from "@/components/config/UiConfig.vue";
import CustomEmotesConfig from "@/components/config/CustomEmotesConfig.vue";

const store = useStore();
const route = useRoute()
const router = useRouter()
// 客户端
const {clients} = setupMapState("Account", ['clients']);
// 当前账号
const {currentUid} = setupMapState("Account", ['currentUid']);

setWindowTitle("配置")

const initHash = (route) => {
  if (route.hash) {
    return route.hash.substring(1)
  }
  return "account"
}

const activeTab = ref(initHash(route))

const tabChanged = (name) => {
  router.push({hash: "#" + name, query: {account: currentUid.value}})
}

const removeAccount = (userId, username) => {
  ElementUtils.confirm(`确认移除账号: ${username} UID: ${userId} ?`, "移除账号").then(res => {
    if (res === 'confirm') {
      console.log(1)
      store.commit("Account/accountDel", userId)
      ElementUtils.notice({message: '删除成功'});
      router.push({query: {account: currentUid.value}})
    }
  })
}

const addAccount = () => {
  ElMessageBox.prompt("请输入Cookie", "添加账号", {
    inputValidator: (value) => {
      try {
        NgaClient.parseCookie(value)
        return true
      } catch (e) {
        return "cookie错误"
      }
    }
  }).then(({value}) => {
    store.commit("Account/accountAdd", value)
    ElementUtils.notice({message: '添加成功'});
  }).catch(r => console.log(r))
}

watch(route, (nv, ov) => {
  activeTab.value = initHash(nv)
})
</script>

<template>
  <el-tabs id="tabs" v-model="activeTab" style="height: 100%" type="border-card" @tab-change="tabChanged">
    <el-tab-pane class="tab-pane" label="账号管理" lazy name="account">
      <h5>已有账号 -
        <el-button size="small" type="success" @click="addAccount">添加</el-button>
      </h5>
      <ul>
        <li v-for="{userId,username} in clients">
          <span>{{ username }} ({{ userId }}) </span>
          <el-icon color="red" style="cursor: pointer" @click="removeAccount(userId,username)">
            <DeleteFilled/>
          </el-icon>
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane class="tab-pane" label="界面" lazy name="ui">
      <ui-config/>
    </el-tab-pane>
    <el-tab-pane class="tab-pane" label="表情" lazy name="emotes">
      <custom-emotes-config/>
    </el-tab-pane>

    <el-tab-pane class="tab-pane" label="屏蔽" lazy name="block">
      <block-data-config/>
    </el-tab-pane>
    <el-tab-pane class="tab-pane" label="私信黑名单" lazy name="pm_block">
      <pm-block-config/>
    </el-tab-pane>

  </el-tabs>
</template>

<style scoped>
.tab-pane {
  text-align: left;
}
</style>